var SVG = "http://www.w3.org/2000/svg";
var XLINK = "http://www.w3.org/1999/xlink";

function CreateSVG () {
	var xmlns = "http://www.w3.org/2000/svg";
	var boxWidth = 300;
	var boxHeight = 300;

	var svgElem = document.createElementNS (xmlns, "svg");
	svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
	svgElem.setAttributeNS (null, "width", boxWidth);
	svgElem.setAttributeNS (null, "height", boxHeight);
	svgElem.style.display = "block";

	var g = document.createElementNS (xmlns, "g");
	svgElem.appendChild (g);
	g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');

	// draw linear gradient
	var defs = document.createElementNS (xmlns, "defs");
	var grad = document.createElementNS (xmlns, "linearGradient");
	grad.setAttributeNS (null, "id", "gradient");
	grad.setAttributeNS (null, "x1", "0%");
	grad.setAttributeNS (null, "x2", "0%");
	grad.setAttributeNS (null, "y1", "100%");
	grad.setAttributeNS (null, "y2", "0%");

	var stopTop = document.createElementNS (xmlns, "stop");
	stopTop.setAttributeNS (null, "offset", "0%");
	stopTop.setAttributeNS (null, "stop-color", "#ff0000");
	grad.appendChild (stopTop);

	var stopBottom = document.createElementNS (xmlns, "stop");
	stopBottom.setAttributeNS (null, "offset", "100%");
	stopBottom.setAttributeNS (null, "stop-color", "#0000ff");
	grad.appendChild (stopBottom);
	defs.appendChild (grad);
	g.appendChild (defs);

	// draw borders
	var coords = "M 0, 0";
	coords += " l 0, 300";
	coords += " l 300, 0";
	coords += " l 0, -300";
	coords += " l -300, 0";

	var path = document.createElementNS (xmlns, "path");
	path.setAttributeNS (null, 'stroke', "#000000");
	path.setAttributeNS (null, 'stroke-width', 10);
	path.setAttributeNS (null, 'stroke-linejoin', "round");
	path.setAttributeNS (null, 'd', coords);
	path.setAttributeNS (null, 'fill', "url(#gradient)");
	path.setAttributeNS (null, 'opacity', 1.0);
	g.appendChild (path);

	var svgContainer = document.getElementById ("svgContainer");
	svgContainer.appendChild (svgElem);
}

function buildZCircle(x, y, r, z, style) {
	var c = buildCircle(x, y, r, style);
	c.setAttributeNS (null, 'z', z)
	return c;
}

function parseCoords(coords, offset) {
	if (offset == 0) {
		if (coords.length < 1) return "";
		var coord = coords[0];
		return "M "+ coord[0] +" "+ coord[1] +" "+ parseCoords(coords, 1) +" Z";
	} else if (coords.length == offset) {
		var coord = coords[offset -1];
		if (coord[0] == 0) return "";
		return "L "+ -coord[0] +" "+ coord[1];
	} else {
		if (coords.length < offset + 3) return "";
		var coord0 = coords[offset - 1];
		var coord1 = coords[offset + 0];
		var coord2 = coords[offset + 1];
		var coord3 = coords[offset + 2];
		return "C "+ coord1[0] +" "+ coord1[1] +" "+
			coord2[0] +" "+ coord2[1] +" "+
			coord3[0] +" "+ coord3[1] +" "+
			parseCoords(coords, offset + 3) +" C "+
			-coord2[0] +" "+ coord2[1] +" "+
			-coord1[0] +" "+ coord1[1] +" "+
			-coord0[0] +" "+ coord0[1];
	}
}
function buildZPath(d, z, style) {
//	var d = parseCoords(coords, 0);

	var p = buildPath(d, style);
	p.setAttributeNS (null, 'z', z);

	return p;//tilt(p, h, 0*Math.PI/4);
}

function tilt(element, h, rad, rotate) {
	var a = Math.sin(rad);
	var b = Math.cos(rad);
	element.setAttributeNS (null, 'transform', "translate(0 "+ -h*a +") scale(1 "+ b +") rotate("+ rotate +")");
	return element;
}

function buildDots(coords) {
	var g = document.createElementNS (SVG, "g");
	for (var i = 0; i < coords.length; ++i) {
		var coord = coords[i];
		g.appendChild(buildCircle(coord[0], coord[1], 10, "red", 1));
	}
	return g;
}

function tiltGroup(g, rad, rotate) {
	if (!g.hasChildNodes()) return g;

	var a = Math.sin(rad);
	var b = Math.cos(rad);
	var childNodes = g.childNodes;
	for (var i = 0; i < childNodes.length; ++i) {
		var childNode = childNodes[i];
		if (!childNode.hasAttribute('z')) continue;

		var z = childNode.getAttribute('z');
//		childNode.setAttributeNS (null, 'transform', "translate(0 "+ -z*a +") scale(1 "+ b +")");
		tilt(childNode, z, rad, rotate);
	}
	return g;
}

function buildPlanet() {
	var svgElem = document.createElementNS (SVG, "svg");
	svgElem.setAttributeNS (null, 'width', 256);
	svgElem.setAttributeNS (null, 'height', 256);
	svgElem.setAttributeNS (null, 'viewBox', "-103 -103 206 206");

	var g = document.createElementNS (SVG, "g");
/*
	g.appendChild(buildZCircle(0, 0, 100 * Math.cos(Math.asin(.95)),-95, "fill: #000000"));
	g.appendChild(buildZCircle(0, 0, 100 * Math.cos(Math.asin(.75)),-75, "fill: #403000"));
	g.appendChild(buildZCircle(0, 0, 100 * Math.cos(Math.asin(.5)),-50, "fill: #806000"));
	g.appendChild(buildZCircle(0, 0, 100 * Math.cos(Math.asin(.25)),-25, "fill: #c09000"));
	g.appendChild(buildZCircle(0, 0, 100 * Math.cos(Math.asin(0)),  0, "fill: #ffc000"));
	g.appendChild(buildZCircle(0, 0, 100 * Math.cos(Math.asin(.25)), 25, "fill: #ffd000"));
	g.appendChild(buildZCircle(0, 0, 100 * Math.cos(Math.asin(.5)), 50, "fill: #ffe000"));
	g.appendChild(buildZCircle(0, 0, 100 * Math.cos(Math.asin(.75)), 75, "fill: #fff000"));
	g.appendChild(buildZCircle(0, 0, 100 * Math.cos(Math.asin(.95)), 95, "fill: #ffffff"));
*/
	var color = Math.random()*360;
	var xx = 100;
	var yy = 10;
	var zz = 8;
	for (var i = -xx+yy; i <= xx-yy; i = i + 2*(xx-yy)/zz) {
		var a = Math.abs(i / 100);
		var b = Math.asin(a);
		var c = Math.cos(b);
		var r = 100 * c;
		var z = i;

		var circ = buildZCircle(0, 0, r, z, "fill: #"+ hsla(color, 1, .5 +i / 250));
		circ.setAttributeNS (null, 'test', i +" "+ a +" "+ b +" "+ c +" "+ r);
		g.appendChild(circ);
	}


	tiltGroup(g, Math.PI / 3, 45);
	svgElem.appendChild(g);
	svgElem.appendChild(buildCircle(0, 0, 100, "fill: transparent; stroke: black; stroke-width: 2"));

//	var svgContainer = document.getElementById ("svgContainer");
	document.body.appendChild (svgElem);
}

function buildShip() {
	var svgElem = document.createElementNS (SVG, "svg");
	svgElem.id = "ship";

	svgElem.setAttributeNS (null, 'width', 256);
	svgElem.setAttributeNS (null, 'height', 256);
	svgElem.setAttributeNS (null, 'viewBox', "-103 -103 206 206");

//	svgElem.appendChild(buildImage("ship.png"));

	var g = document.createElementNS (SVG, "g");
	svgElem.setRotation = function(rad) {
		tiltGroup(g, Math.PI/4, rad);
	}

	var path = parseCoords([[0, -99],
				[40, -60], [40, -20], [31, 20],
				[28, 24], [40, 40], [45, 45],
				[46, 46], [46, 60], [44, 68],
				[40, 70], [30, 50], [10, 49]], 0);
	g.appendChild(buildZPath(path, 0, "fill: #c0c0c0; stroke: black; stroke-width: 2;"), 0);
	var path = parseCoords([[0, -91],
				[34, -60], [35, -20], [28, 15],
				[32, 20], [29, 32], [22, 34],
				[20, 50], [10, 54], [5, 54]], 0);
	g.appendChild(buildZPath(path, 10, "fill: #c0c0c0; stroke: black;"), 10);
	var path = parseCoords([[0, -80],
				[27, -60], [31, -20], [24, 15],
				[29, 20], [27, 33], [4, 36]], 0);
	g.appendChild(buildZPath(path, 20, "fill: #c0c0c0; stroke: black;"), 20);
	var path = parseCoords([[0, -40],
				[20, -20], [20, 0], [15, 17],
				[20, 20], [17, 30], [4, 30],
				[4, 34], [4, 40], [6, 45]], 0);
	g.appendChild(buildZPath(path, 30, "fill: #8080ff; stroke: black;"), 30);
	g.appendChild(buildZCircle(0, -22, 6, 35, "fill: red; stroke: black;"));
	g.appendChild(buildZCircle(0, -62, 4, 25, ""));
	g.appendChild(buildZCircle(8, -51, 4, 25, ""));
	g.appendChild(buildZCircle(-8, -51, 4, 25, ""));
//	tiltGroup(g, Math.PI/4, 210);
	svgElem.appendChild(g);

//	svgElem.appendChild(buildDots(path));
//	var svgContainer = document.getElementById ("svgContainer");
	document.body.appendChild (svgElem);
}

var rad = 0;
function update() {
	var t = setTimeout(function() { update(); }, 10);

	var ship = document.getElementById("ship");
	if (!ship) return;

	ship.setRotation(rad);
	rad += 1;
}
